<template>
	<view>
		　　<view class="uni_header">
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-if="info!=null">
					<!-- <view class="cu-avatar round xl" style="background-image:url(../../../common/img/touxiang.png);width:150rpx;height: 150rpx;">
					</view> -->
					<image class="cu-avatar round" :src="info.avatar" style="width:140rpx;height:140rpx;"></image>
					<view class="content">
						<view class="text-grey">
							<view class="text-white text-xl">{{info.nick_name}}</view>
						</view>
						<view class="text-white text-df">
							<view class="text-cut">{{info.phone_number}}</view>
						</view>
					</view>
				</view>
				<view class="panel" v-else>
					<view class="name">请登录</view>
					<button v-if="canIUse" class="uc-btn gray" open-type="getUserInfo" @getuserinfo="getWeiXin">
						</image>未绑定
					</button>
				</view>
			</view>
		</view>
		<!-- <view class="ads">
			<image class="ads_icon" src="../../../common/img/gonggao.png" mode=""></image>
			<text class="ads_text">最新电动车换牌公告，点击查看详情！</text>
		</view> -->
		<view class="operating_box" style="margin-top:-150rpx;margin-bottom:20rpx;">
			<view class="operating_header">
				<view class="operating_header_left">
					<text class="operating_header_text">我的钱包</text>
				</view>
				<view class="operating_header_right" @tap="toMyWaller">
					<text class="detail_right_text" style="color: #FF7544;">立即充值
						<text class="cuIcon-right" style="color: #FF7544;"></text>
					</text>
				</view>
			</view>
			<view class="operating_box_inner">
				<view class="money_details_inner money_details_inner1">
					<view class="money_details_number">{{info.balance}}</view>
					<view class="money_details_text" style="color: #666666;">账户余额(元)</view>
				</view>
				<view class="detail_br" style="border-left: 1rpx solid #EDEDED;position: relative;top: 25rpx;"></view>
				<view class="money_details_inner money_details_inner1">
					<view class="money_details_number">{{info.donation_amount}}</view>
					<view class="money_details_text" style="color: #666666;">赠送余额(元)</view>
				</view>
				<view class="detail_br" style="border-left: 1rpx solid #EDEDED;position: relative;top: 25rpx;"></view>
				<view class="money_details_inner money_details_inner1">
					<view class="money_details_number">{{info.frozen_amount}}</view>
					<view class="money_details_text" style="color: #666666;">冻结余额(元)</view>
				</view>
			</view>
		</view>
		<view class="operating_box">
			<view class="zhangdan">常用功能</view>
			<view class="operating_box_inner base_line" style="margin-top:20rpx;">
				<view class="base_inner" @tap="tocard">
					<image class="base_inner_icon" src="../../../common/img/dainfei.png" mode=""></image>
					<view class="base_inner_text">电卡</view>
				</view>
				<view class="base_inner" @tap="toPackage">
					<image class="base_inner_icon" src="../../../common/img/taocan.png" mode=""></image>
					<view class="base_inner_text">套餐</view>
				</view>
				<view class="base_inner" @tap="toYys">
					<image class="base_inner_icon" src="../../../common/img/zhanghu.png" mode=""></image>
					<view class="base_inner_text">运营商</view>
				</view>
				<view class="base_inner" @tap="toagent">
					<image class="base_inner_icon" src="../../../common/img/daili.png" mode=""></image>
					<view class="base_inner_text">代理</view>
				</view>
			</view>
			<view class="operating_box_inner base_line" style="margin-top:20rpx;">
				<view class="base_inner" @tap="tosksz">
					<image class="base_inner_icon" src="../../../common/img/wuye.png" mode=""></image>
					<view class="base_inner_text">收款设置</view>
				</view>
				<view class="base_inner" @tap="toYccd">
					<image class="base_inner_icon" src="../../../common/img/wangguan.png" mode=""></image>
					<view class="base_inner_text">远程充电</view>
				</view>
			</view>
		</view>
		<view class="cu-list menu margin-top-sm solid-bottom">
			<view class="cu-item arrow">
				<view class="content" @tap="tojoining">
					<image class="content-img" src="../../../common/img/jiameng.png"></image>
					<text class="text-black">申请加盟</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content" @tap="tofeedback">
					<image class="content-img" src="../../../common/img/xiugai.png"></image>
					<text class="text-black">意见反馈</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content" @tap="toabout">
					<image class="content-img" src="../../../common/img/aboutus.png"></image>
					<text class="text-black">关于我们</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<image class="content-img" src="../../../common/img/kefu.png"></image>
					<text class="text-black">客服中心</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content" @tap="toguide">
					<image class="content-img" src="../../../common/img/zhinan.png"></image>
					<text class="text-black">操作指南</text>
				</view>
			</view>
		</view>
		<view style="height:150rpx;"></view>
		<view class="box ">
			<view class="cu-bar tabbar bg-white padding-sm foot">
				<view class="action text-black text-sm" @tap="toshowmsg">
					<view>
						<image src="../../../common/img/weixuanzhong.png" style="width: 40rpx;height: 40rpx;"></image>
					</view>电桩分布
				</view>
				<view class="action text-black text-sm" @tap="tomessage">
					<view>
						<image src="../../../static/tabbar/xinxi_hui.png" style="width: 40rpx;height: 40rpx;"></image>
					</view> 消息
				</view>
				<view class="action text-gray add-action" @tap="saoma">
					<button class="cu-btn cuIcon-add bg-green shadow"></button>
				</view>
				<view class="action text-black text-sm" @tap="tomyorder">
					<view>
						<image src="../../../static/tabbar/dingdanhui@2x.png" style="width: 40rpx;height: 40rpx;">
						</image>
					</view> 订单
				</view>
				<view class="action text-green" @tap="tomyself">
					<view>
						<image src="../../../common/img/mine.png" style="width: 40rpx;height: 40rpx;"></image>
					</view> 我的
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wx from '@/api/jweixin-1.6.0.js'
	export default {
		data() {
			return {
				src: '',
				info: {
					phone_number: '', //	字符串	手机号
					avatar: '', //	字符串	头像路径
					nick_name: '', //	字符串	昵称
					frozen_amount: '', //	字符串	冻结金额
					donation_amount: '', //	字符串	赠送金额
					balance: '', //	字符串	帐号余额
					openid: ''
				},
				menuauthority: [], //菜单权限
				usertype: '', //用户类型 null 不能进去运营商后台 0超级运营商 1 普通运营商
				showChoose: false,
			}
		},
		onLoad() {
			this.getdata();

			let that = this;
			uni.request({
				url: 'http://evcssappapi.yushengkeji.cn/user/v1/GetSign',
				data: {
					"url": encodeURIComponent(location.href.split('#')[0]),
					api: ['scanQRCode'], //调用的方法去接口列表里找
				},
				method: "post",
				success: function(res) {
					console.log("res=" + JSON.stringify(res));
					var wxData = res.data.data
					that.wx_sanCode(wxData)
				}
			})
		},
		methods: {
			getWeiXin() {
				//跳转
				window.location.href = 'http://evcssappapi.yushengkeji.cn/user/v1/getweixincode'
			},
			wx_sanCode: function(wxData) {
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: wxData.AppId, // 必填，公众号的唯一标识
					timestamp: wxData.Timestamp, // 必填，生成签名的时间戳
					nonceStr: wxData.NonceStr, // 必填，生成签名的随机串
					signature: wxData.Signature, // 必填，签名
					jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
				})
				wx.ready(function() {
					// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
					wx.checkJsApi({
						jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function(res) {
							console.log('返回信息')
							console.log(res)
							// 以键值对的形式返回，可用的api值true，不可用为false
							// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
						}
					});
				});
				wx.error(function(res) {
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					console.log(res, '接口验证失败')
				});

			},

			saoma() { //页面点击扫码按钮
				let that = this;
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						console.log(res);
						console.log('扫码')
						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果


						if (result.indexOf("http") == 0) {
							let src = result.split("?")[1];
							let erm = src.split("=")[1];

							// uni.showToast({
							// 	title: '登录成功!'+erm,
							// 	icon: 'none'
							// })
							uni.navigateTo({
								url: '/pages/ceshi/device/device?scode=' + erm
							})
							that.tocharge(erm);
						} else {
							that.tocharge(result);
						}
					}
				});
			},
			getdata() {
				// let openid = uni.getStorageSync("openid");
				let openid="oklcX67Bog5HB6AhCFoGr5yO2R1A"
				if (openid) {
					let date = uni.getStorageSync("LoginDate");
					if (date) {
						var tt = Date.now() - date;
						this.logininfo = tt;
						let t = parseInt(tt);
						if (t <= 6600000) {
							this.getuserinfo();
						} else {
							uni.redirectTo({
								url: '/pages/user/login/login?type=my'
							})
						}
					} else {
						uni.redirectTo({
							url: '/pages/user/login/login?type=my'
						})
					}
				} else {
					uni.redirectTo({
						url: '/pages/user/login/login?type=my'
					})
				}
			},
			getuserinfo() {
				let that = this;
				that.http.tokenreq({
					url: 'user/v1/getuserinfo',
				}).then((res) => {
					let e = res.data;
					if (e.code == 0 && e.success) {
						that.info = e.data;
						console.log(that.info)
					} else {
						uni.navigateTo({
							url: '/pages/user/login/login?logintype=my'
						})
					}
				})
			},
			//远程充电
			toYccd() {
				uni.navigateTo({
					url: '/pages/user/charging/charging'
				})
			},
			//关于我们
			toabout() {
				uni.navigateTo({
					url: '../about/aboutUs/aboutUs'
				})
			},
			//用户指南
			toguide() {
				uni.navigateTo({
					url: '../guide/guide'
				})
			},
			//意见反馈
			tofeedback() {
				uni.navigateTo({
					url: '../feedback/feedback'
				})
			},
			//加入我们
			tojoining() {
				uni.navigateTo({
					url: '../joining/joining'
				})
			},
			//我的钱包
			toMyWaller() {
				uni.navigateTo({
					url: '/pages/user/wallet/wallet'
				})
			},
			//消息
			tomessage() {
				uni.navigateTo({
					url: '/pages/user/message/message'
				})
			},
			// 套餐
			toPackage() {
				uni.navigateTo({
					url: '/pages/user/package/package_time'
				})
			},
			// 电桩分布
			toshowmsg() {
				uni.navigateTo({
					url: "/pages/user/Piledistribution/pileList"
				})
			},
			//我的订单
			tomyorder() {
				uni.navigateTo({
					url: '/pages/user/order/order/order'
				})
			},
			//运营商
			toYys() {
				this.usertype = uni.getStorageSync("usertype");
				if (this.usertype == '-1' || this.usertype == 'null') {
					uni.showToast({
						icon: 'none',
						title: '你还不是运营商,请先申请!'
					});
					return;
				} else {
					uni.navigateTo({
						url: '/pages/index/index'
					})

					// let that = this;
					// that.http.tokenreq({
					// 	url: 'operator/v1/getinfo'
					// }).then((res) => {
					// 	console.log("res=" + JSON.stringify(res.data));
					// 	let e = res.data;
					// 	if (e.code == 0 && e.success) {
					// 		uni.navigateTo({
					// 			url: '/pages/index/index'
					// 		})
					// 	} else {
					// 		uni.showModal({
					// 			title: '提示',
					// 			content: e.message + ",立即去注册",
					// 			success: function(res) {
					// 				if (res.confirm) {
					// 					uni.navigateTo({
					// 						url: '/pages/register/register'
					// 					})
					// 				} else if (res.cancel) {
					// 					console.log('用户点击取消');
					// 				}
					// 			}
					// 		});
					// 	}
					// })

				}
			},
			//代理
			toagent() {
				uni.navigateTo({
					url: '/pages/agent/myAgent/myAgent'
				})
			},
			//电卡
			tocard() {
				let balance = this.info.balance;
				uni.navigateTo({
					url: '/pages/user/eleccard/eleccard?balance=' + balance,
				})
			},
			//收款设置
			tosksz() {
				uni.navigateTo({
					url: '/pages/user/receivingSet/receivingSet'
				})
			},
			//我的
			tomyself() {
				uni.navigateTo({
					url: '/pages/user/my/my'
				})
			},
			//付款
			topay() {
				/* uni.navigateTo({
					url: '/pages/user/pay/pay'
				}) */
				this.getcd();
			},
			tocharge(src) {
				let that = this;
				that.http.tokenreq({
					url: 'user/v1/chargingstatus',
				}).then((res) => {
					let e = res.data;
					if (e.code == 0 && e.success) {
						uni.navigateTo({
							url: '/pages/user/charging/chargingnow'
						})
						return;
					} else {
						uni.navigateTo({
							url: '/pages/user/pay/pay?erm=' + src
						})
					}
				})
			},
			getcd() {
				wx.scanQRCode({
					needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
					}
				});
				// let that=this;
				// uni.scanCode({
				// 	success: function (res) {
				// 		console.log('条码内容：' + res.result);
				// 		that.tocharge(res.result);
				// 	 }
				// });
				// let that=this;
				// that.http.tokenreq({
				// 	url: 'user/v1/chargingstatus',
				// }).then((res) => {
				// 	let e=res.data;
				// 	if(e.code==0 && e.success){
				// 		uni.navigateTo({
				// 			url: '/pages/user/charging/chargingnow'
				// 		})
				// 		return;
				// 	}else{
				// 		uni.showModal({
				// 			content: "将进入远程充电功能？",  
				// 			success: (e) => {  
				// 				if (e.confirm) {  
				// 					that.ChooseImage(); 
				// 				} else { 
				// 					console.log('用户点击取消');
				// 				}  
				// 			},  
				// 			fail: () => {  
				// 				res(false)  
				// 			}  
				// 		})
				// 	}
				// })
			},
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}

	.uni_header {
		height: 440rpx;
	}

	.cu-bar.tabbar .action {
		font-size: 22rpx;
	}

	.operating_header {
		padding: 20rpx 5rpx;
	}

	.operating_header_text {
		color: #000000;
		font-size: 36rpx;
		font-weight: 500;
	}

	.detail_right_text {
		font-size: 30rpx;
		color: red;
	}

	.money_details_number {
		color: #000000;
		font-size: 36rpx;
		font-weight: 700;
	}

	.cu-list.menu-avatar>.cu-item {
		background-color: #52ABFB;
		margin: 60rpx 30rpx;
	}

	.cu-list.menu-avatar>.cu-item .content {
		left: 200rpx;
	}

	.cu-list.menu-avatar>.cu-item:after {
		border: none;
	}

	.operating_header {
		border-bottom: 4rpx solid #F7F7F7;
	}

	.money_details_inner1 {
		margin-top: 10rpx !important;
	}

	.content-img {
		width: 36rpx !important;
		height: 36rpx !important;
		vertical-align: middle;
	}
</style>
